﻿@model RechargeControllerModel.Debit
<div class="ui-box ui-box-alpha">
    <div class="ui-box-head">
        <div class="ui-box-head-border">
            <div class="ui-box-head-title">
                充 值</div>
            <a href="#" class="ui-box-head-more">去购物</a>
        </div>
    </div>
    <div class="ui-box-container">
        <div class="ui-box-content ui-box-content-special">
            <div class="row-fluid">
                <div class="span4">
                    充值账户： <span class="ft-weight-bold">@(User.Identity.Name)</span>
                </div>
                <div class="span4">
                    账户余额：<span class="ft-green ft-weight-bold">
                        @(Model.Account.AvailableCash.ToString("N"))<small class="ft-gray ft-weight-normal">(元)</small></span>
                </div>
                <div class="span4">
                    <span>充值资金不能用于提现。</span>
                </div>
            </div>
        </div>
    </div>
    <div class="ui-box-container-noborder">
        <div class="ui-box-content">
            <div class="payment-account">
                @if (Model.EBank != null)
                {
                    <form class="form-horizontal" action="/recharge/debit?@(Request.QueryString)" target="_blank" method="post" onsubmit="return rechargeConfirm(this);">
                    <div class="control-group">
                        <label class="control-label" for="amount">
                            充值方式：</label>
                        <div class="controls">
                            <div>
                                <img alt="@(Model.EBank.PaymentBank.Name)" src="@(WebSite.Static + Model.EBank.PaymentBank.Image)" />
                            </div>
                            <div>
                                <p>
                                    请关注您的充值金额是否超限 北京银行客服热线：95526
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="amount">
                            充值金额：</label>
                        <div class="controls">
                            @if (Model.Package != null)
                            {
                                <div class="input-append">
                                    <input type="text" id="amount" name="amount" style="color: #FF6600;" class="input-mini ft-weight-bold"
                                       readonly="readonly" value=" @(Model.Package.OriginalAmount.ToString("N"))" />
                                    <span class="add-on">元</span>
                                </div> <span id="input-help-amount" class="input-help">adsf</span>
                                <div>
                                    <p class="input-help">
                                        @(Model.Package.Title)</p>
                                </div>
                            }
                            else
                            {
                                <div class="input-append">
                                    <input type="text" id="amount" name="amount" style="color: #FF6600;" class="input-mini ft-weight-bold"
                                        maxlength="5" onblur="checkAmount(this);" autocomplete="off" />
                                    <span class="add-on">元</span>
                                </div>
                                <span id="input-help-amount" class="input-help"></span>
                            }
                        </div>
                    </div>
                    <div class="form-actions" style="margin: 0;">
                        <button id="recharge-submit" class="btn   btn-large" type="submit">
                            登录到网上银行充值</button>
                    </div>
                    </form>
                }
            </div>
        </div>
    </div>
</div>
<div class="hide" id="myModal" style="width: 480px;">
    <div class="modal-header">
        <a data-dismiss="modal" class="close" href="javascript:$.fancybox.close();">×</a>
        <h3>
            充值遇到问题？</h3>
    </div>
    <div class="modal-body">
        <p>
            充值完成前请不要关闭此窗口。完成充值后请根据你的情况点击下面的按钮：
        </p>
        <p class="ft-weight-bold">
            请在新开网上储蓄卡页面完成付款后再选择。
        </p>
        <p style="text-align: center;">
            <a class="btn" href="@(WebSite.My)/recharge">已完成充值</a> <a class="btn" href="/recharge">
                充值遇到问题 </a>
        </p>
        <p>
            <a href="/">返回重新选择充值方式 </a>
        </p>
    </div>
</div>
@section css{
    @Url.Ayatta().StaticCss("jquery.fancybox")
}
@section js{
    @Url.Ayatta().StaticJs("jquery.fancybox.pack")
    <script type="text/javascript">
        function checkAmount(obj) {
            var status = false;
            var val = obj.value;
            if (val == '') {
                $('#input-help-amount').html('请输入充值金额！');
                status = false;
            }
            else if (isNaN(val) || val == '') {
                $(obj).val('');
                $(obj).focus();
                $('#input-help-amount').html('充值金额只能为数字！');
                status = false;
            }
            else {
                var low = 0.01;
                var amount = parseFloat(val);
                if (amount < low) {
                    $(obj).val('10');
                    $('#input-help-amount').html('必须大于或等于0.01！');
                    status = false;
                } else {
                    $('#input-help-amount').html('');
                    status = true;
                }
            }
            return status;
        }
        function rechargeConfirm(obj) {
            var status = checkAmount(document.getElementById('amount'));
            if (status == true) {
                $("#recharge-submit").attr('disabled', 'disabled');
                $.fancybox.open({ href: '#myModal', type: 'inline', modal: true, padding: 0 });
                return true;
            }
            else {
                return false;
            }
        }       
    </script>
}
